import Taro, { Component, Config } from '@tarojs/taro'
import { Image, ScrollView, Text, View } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import { toNewsInfoPage } from '@/utils/page_router'
import { formatTime, showEmpty } from "@/utils/utils"
import { getNewsType, getNewsPage } from '@/api/newsApi'
import { getSharePath } from "@/utils/storage"
import { EmptyData, Loading, LoadMore } from "@/components/index"
import {APP_NAME} from "@/config/config";

export default class Index extends Component {
  state: any
  props: any
  config: Config = {
    backgroundColor: '#ccc',
    backgroundTextStyle: "dark",
    navigationBarTitleText: '新闻资讯',
  }

  constructor () {
    super(...arguments)
    this.state = {
      loading: true,
      page: 1,
      limit: 10,
      typeKey: 0,
      dataList: [],
      typeList: [],
      loadStatus: 'loading',
    }
  }

  componentWillMount() {
    this.getType()
    this.getPage()
  }

  //  分享小程序
  onShareAppMessage() {
    return { title: APP_NAME, path: getSharePath() }
  }

  //  监听用户上拉触底事件
  onReachBottom(){
    this.getPage()
  }

  async getType () {
    const typeRes = await getNewsType()
    const { data } = typeRes
    data.unshift({ title: '全部' })
    this.setState({
      typeList: data
    })
  }

  //  分页获取数据
  getPage() {
    const { page, limit, dataList, loadStatus, typeKey, typeList } = this.state
    const type = typeList[typeKey] || {}
    if(loadStatus === 'noMore') {
      return
    }

    const params:any = { page, limit }
    if (type.id) {
      params.cid = type.id
    }

    getNewsPage(params).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page+1,
        loading: false,
        dataList: page === 1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      })
    })
  }

  //  切换tab
  onSwitchTab(key) {
    this.setState({
      page: 1,
      typeKey: key,
      dataList: [],
      loadStatus: 'loading',
    }, () => {
      this.getPage()
    })
  }

  render() {
    const { typeKey, dataList, loading, loadStatus, typeList } = this.state
    return (<View className='page'>
      {loading && <Loading isCover/>}
      <View className='tab-list--height'/>
      <View className='tab-list fy-popup fy-popup--top thin-border__t'>
        <ScrollView scrollX className='tab-scroll'>
          {typeList.map((item, key) => {
            return (<View key={key} className={classNames('tab-item f-g-5', typeKey === key && 'active')} onClick={this.onSwitchTab.bind(this, key)}>{item.title}</View>)
          })}
        </ScrollView>
      </View>
      <ScrollView scrollY className='page-body'>
        <View className='news-list'>
          {dataList.map(news => {
            return (<View key={news.id} className='news-item' onClick={() => toNewsInfoPage(news.id)}>
              <Image src={news.coverImg} className='news-img' lazyLoad/>
              <View className='news-info d-f f-d-c j-c-b'>
                <View className='news-title t-o-e'>{news.title}</View>
                <View className='news-subtitle t-o-e-2'>{news.subTitle}</View>
                <View className='news-foot d-f a-i-b j-c-b'>
                  <View className='see-number d-f a-i-c'>
                    <Text className='bnn-icon m-r-10'>&#xe73d;</Text>{news.readNumber}
                  </View>
                  <View>{formatTime(news.createdAt, 'YY-MM-DD HH:mm')}</View>
                </View>
              </View>
            </View>)
          })}
        </View>
        {showEmpty(dataList, loadStatus) && <EmptyData/>}
        {!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus}/>}
      </ScrollView>
    </View>)
  }
}
